<template>
	<div class="container">
		<div class="header">
			<router-link to="">
				<i class="iconfont icon-back" @click="$router.back()"></i>
			</router-link>
			<p>收货地址</p>
		</div>
		<div class="content">
			<ul>
				<li v-for="item in $store.state.address.list" :key="item.id" :class="{ default: item.isDefault === 1 }">
					<p class="address-one">
						<span>{{ item.receiveName }}</span>
						<span>{{ item.receivePhone }}</span>
					</p>
					<p class="title">
						{{ item.receiveRegion }}-{{ item.receiveDetail }}
					</p>
					<br>
					<button class="btn2"><i class="iconfont icon-remove" @click="remove(item.id)">删除</i></button>
					<button class="btn3"><i class="iconfont icon-edit" @click="beginUpdate(item)">编辑</i></button>
					<span class="box" v-if="item.isDefault === 1">默认地址</span>
					<button v-else @click="setDefault(item.id)">设为默认</button>
				</li>
			</ul>
			<button class="btn" @click="beginAdd">+新增地址</button>
		</div>
		<AddressEdit ref="edit" address="" v-show="isEdit" @close="isEdit = false" @save="save">
		</AddressEdit>
	</div>
</template>

<script>
import AddressEdit from "@/views/Address/AddressEdit";
export default {
	name: "address",
	components: { AddressEdit },
	data() {
		return {
			isEdit: false,
			editModel: null
		}
	},
	methods: {
		async setDefault(id) {
			try {
				await this.$store.dispatch('address/setDefault', id);
				this.$miNotice("默认地址设置成功")
			} catch (e) {/**/
			}
		},
		async remove(id) {
			//发ajax
			try {
				await this.$miConfirm("真删?")
				await this.$store.dispatch('address/remove', id)
				this.$miNotice("删除成功");
			} catch (e) {/**/
			}
		},
		beginAdd() {
			this.$refs.edit.beginEdit({
				id: 0,
				receiveName: "",
				receivePhone: "",
				receiveRegion: "",
				receiveDetail: "",
				isDefault: 0
			})
			this.isEdit = true
		},
		beginUpdate(address) {
			this.$refs.edit.beginEdit(address)
			this.isEdit = true
		},
		async save(address) {
			try {
				await this.$store.dispatch(address.id === 0 ? 'address/add' : 'address/update', address);
				this.$miNotice(address.id === 0 ? '新增成功...' : '修改成功...')
				this.isEdit = false
			} catch (e) {/**/
			}
		}
	},
	async created() {
		try {
			await this.$store.dispatch('address/init')
		} catch (e) {/**/
		}

	},
}
</script>

<style scoped>
.container {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: #fff;
}

.header {
	flex-shrink: 0;
	height: 45px;
	display: flex;
	align-items: center;
}

.header p {
	font-size: 18px;
	margin-left: 146px;
	color: rgba(0, 0, 0, 0.8);
}

.content ul li {
	padding: 20px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}

.address-one {
	display: flex;
	justify-content: space-between;
}

.box {
	font-size: 12px;
	padding: 2px;
	color: #b60909;
	border: 1px solid #b60909;
}

.title {
	font-size: 12px;
	color: rgba(0, 0, 0, 0.4);
	margin-top: 10px;
	margin-left: 10px;
}

.btn {
	align-items: center;
	background-color: rgb(255, 255, 255);
	border-color: rgb(132, 95, 63);
	border-radius: 5.66667px;
	border-width: 1px;
	height: 48.6667px;
	justify-content: center;
	margin: 16.6667px;
	-webkit-box-align: center;
	-webkit-box-pack: center;
	width: 383px;
	color: rgb(132, 95, 63);
}

.btn2 {
	background-color: #fff;
	border: 0px;
	font-size: 16px;
	color: #000;
}

.btn3 {
	background-color: #fff;
	border: 0px;
	font-size: 16px;
	color: #000;
}
</style>